<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>药店管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/layui/css/layui.css" rel="stylesheet">
    <script src="/jquery/jquery-3.6.0.js"></script>
</head>

<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">小药店管理系统</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                <a>
                    <img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">
                    欢迎, <span id="username">管理员</span>
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;" onclick="logout()">退出</a></dd>
                </dl>
            </li>
        </ul>
    </div>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">采购管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="../supplier/supplier.html">供应商信息管理</a></dd>
                        <dd><a href="../supplier/drug.html">药品信息管理</a></dd>
                        <dd><a href="../procurement/add.html">采购单添加</a></dd>
                        <dd><a href="../procurement/list.html">采购单管理</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">销售管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="add_xiaoshoudan.html">销售单添加</a></dd>
                        <dd><a href="xiaoshoumingxi.html">销售单管理</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">药店统计管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="../statistics/instock.html">入库统计</a></dd>
                        <dd><a href="../statistics/sales.html">销售统计</a></dd>
                        <dd><a href="../statistics/stock.html">库存查询</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">人事管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="../yuangong/add_yuangong.html">员工添加</a></dd>
                        <dd><a href="../yuangong/yuangong.html">员工管理</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">打印管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="../print/ruku.html">入库单</a></dd>
                        <dd><a href="../print/chuku.html">出库单</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">系统管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="../user/xiuGaiMiMa.html">修改密码</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <div class="layui-body">
        <div class="container">
            <table id="salesTable" class="layui-table" lay-filter="salesTable">
                <tbody>
                <!-- 动态生成的行将插入到这里 -->
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- 操作栏模板 -->
<script type="text/html" id="operateBar">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script src="/layui/layui.js"></script>
<script>
    // 退出功能
    function logout() {
        layui.use(['jquery', 'layer'], function(){
            var $ = layui.$;
            var layer = layui.layer;
            
            $.ajax({
                url: '/user/logout',
                type: 'GET',
                success: function(res) {
                    if(res.code === 0) {
                        window.location.href = '/login/login.html';
                    } else {
                        layer.msg(res.msg || '退出失败', {icon: 2});
                    }
                },
                error: function() {
                    layer.msg('服务器错误', {icon: 2});
                }
            });
        });
    }

    layui.use(['element', 'layer', 'table'], function(){
        var element = layui.element;
        var layer = layui.layer;
        var table = layui.table;

        // 初始化表格
        table.render({
            elem: '#salesTable',
            url: '/sale/list',
            method: 'get',
            page: {
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'],
                groups: 5,
                limits: [10, 20, 50, 100],
                limit: 10
            },
            request: {
                pageName: 'page',
                limitName: 'limit'
            },
            parseData: function(res) {
                var result;
                if (Array.isArray(res)) {
                    result = {
                        "code": 0,
                        "msg": "",
                        "count": res.length,
                        "data": res
                    };
                } else {
                    result = {
                        "code": res.code || 0,
                        "msg": res.msg || "",
                        "count": res.total || (Array.isArray(res.data) ? res.data.length : 0),
                        "data": Array.isArray(res.data) ? res.data : []
                    };
                }
                // 如果后端没有做分页，在前端进行分页处理
                if (Array.isArray(result.data)) {
                    var page = parseInt($('.layui-laypage-skip input').val()) || 1;
                    var limit = $('.layui-laypage-limits select').val() || 10;
                    var start = (page - 1) * limit;
                    var end = start + limit;
                    result.data = result.data.slice(start, end);
                }
                return result;
            },
            cols: [[
                {type: 'numbers', title: '序号', width: 80},
                {field: 'orderNo', title: '销售单号', width: 200},
                {field: 'saleTime', title: '销售时间', width: 180, templet: function(d){
                    return d.saleTime ? layui.util.toDateString(new Date(d.saleTime), 'yyyy-MM-dd') : '';
                }},
                {field: 'totalPrice', title: '总金额', width: 120, templet: function(d){
                    return d.totalPrice ? d.totalPrice.toFixed(2) : '0.00';
                }},
                {field: 'operator', title: '经手人', width: 120},
                {field: 'remark', title: '备注'},
                {title: '操作', toolbar: '#operateBar', width: 150, align: 'center', fixed: 'right'}
            ]],
            text: {
                none: '暂无相关数据'
            },
            even: true,
            size: 'lg',
            done: function(res) {
                if(res.code !== 0) {
                    layer.msg(res.msg || '加载数据失败');
                }
            }
        });

        // 设置左侧导航栏选中状态
        $('.layui-nav-item').removeClass('layui-nav-itemed');
        $('dd').removeClass('layui-this');
        var $salesNav = $('a:contains("销售管理")').parent();
        $salesNav.addClass('layui-nav-itemed');
        $('a:contains("销售单管理")').parent().addClass('layui-this');

        //监听工具条事件
        table.on('tool(salesTable)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('确认删除此销售记录？', function(index){
                    $.ajax({
                        url: '/sale/delete/' + data.id,
                        type: 'DELETE',
                        success: function(res) {
                            if(res.code === 0) {
                                layer.msg('删除成功');
                                obj.del();
                            } else {
                                layer.msg(res.msg || '删除失败');
                            }
                        }
                    });
                    layer.close(index);
                });
            }
        });
    });
</script>
</body>
</html>